<template>
    <div class="box">
        <van-list
        v-if="this.total>0"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="15"
        @load="onLoad"
        >
            <div class="re" v-if="cat=='推荐'">
                <div class="item" @click="gotoDetail(v.id)" v-for="(v, i) in recommend" :key="i">
                    <img :src="v.picUrl" alt="" />
                    <p class="van-multi-ellipsis--l2">{{ v.name }}</p>
                    <span><van-icon class="icon" name="service-o" />{{ v.playCount }}</span>
                </div>
            </div>
            <div class="re" v-else>
                <div class="item" @click="gotoDetail(v.id)" v-for="(v,index) in recommend" :key="index">
                    <img :src="v.coverImgUrl" alt="">
                    <p class="van-multi-ellipsis--l2">{{v.name}}</p>
                    <span><van-icon class="icon" name="service-o" />{{v.playCount}}</span>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
export default {
    props:['cat'],
    data(){
        return {
            recommend:[],
            loading: false,
            finished: false,
            list:[],
            num:21,
            total:0,
        }
    },
    methods:{
        gotoDetail(id){
            this.$router.push({name:'recommend',params:{id:id}});
        },
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            
            setTimeout(() => {
                this.recommend = this.recommend.concat(this.list.splice(0,this.num))
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.recommend.length >= this.total) {
                    this.finished = true;
                }
            }, 1000);
        },
    },
    mounted(){
        if(this.cat=='推荐'){
            this.$ajax.getRecommentdList({limit:100}).then(res=>{
                this.list = res.result;
                this.total = res.result.length;
            })
        }else if(this.cat=='精品'){
                this.$ajax.getQualityList({limit:100}).then(res=>{
                this.list = res.playlists;
                this.total = res.playlists.length;

            })
        }else{
            this.$ajax.getcatlists({cat:this.cat,limit:100}).then(res=>{
                this.list = res.playlists;
                this.total = res.playlists.length;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.re{
    color: #333;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
        text-align-last: left;
        font-size: 12px;
        float: left;
        width: 33%;
        height: 10%;
        flex-shrink: 0;
        padding: 2%;
        box-sizing: border-box;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
        span{
            font-size: 8px;
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            padding: 5px;
            background: rgba(0,0,0,0.3);
            border-radius: 15px;
            display: flex;
            align-items: center;
            .icon{
                margin-right: 3px;
            }
        }
    }
}

</style>